import React, { Component, PropTypes } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native'
import { BoxShadow } from 'react-native-shadow'
import {Icon} from './icon'

class IconModel extends Component {
  static defaultProps = {

  }
  static propTypes = {
    name: PropTypes.string
  }
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    console.log(this.props)
    return (
      <TouchableOpacity style={{paddingBottom: 10}} onPress = {this.props.handlePress} >
        <BoxShadow setting={this._getShadowOpt({
          width: this.props.width,
          height: this.props.height,
          style: this.props.style
        })}>
          <View style = {[styles.modelItem, {width: this.props.width, height: this.props.height}]}>
            <Icon name={this.props.icon} size={this.props.iconSize} color={this.props.color} />
            <Text style = {[styles.modelText, {fontSize: this.props.fontSize}]}>{this.props.name}</Text>
          </View>
        </BoxShadow>
      </TouchableOpacity>
    )
  }
  _getShadowOpt(data) {
    return {
        width: data.width,
        height: data.height,
        color: "#999999",
        border: 2,
        radius: 6,
        opacity: 0.1,
        x: 0,
        y: 2,
        style: data.style
    }
  }
}

const styles = StyleSheet.create({
  container: {
  },
  modelItem: {
    backgroundColor: '#fff',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modelText: {
    color: '#333333',
    fontSize: 11,
    marginTop: 5,
  },
})

export default IconModel
